<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消除魔术字符串</title>
</head>
<body>
<script>
    /**
     * 什么是魔术字符串：它的出现不利于后期修改和维护【这就是强耦合】
     * 还是看下具体的例子吧：
     *
     * */
    // 有魔术字串的
    function getArea(shape, options) {
      let area = 0;
      switch (shape) {
        case 'Triangle': // 魔术字符串【有没有大致明白了，感觉说不清】
          area = .5 * options.width * options.height;
          break;
              /* ... more code ... */
      }
      return area;
    }
    getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串【还是不行的话，在看例子】

    // 消除魔术字串了
    const shapeType = {
      triangle: 'Triangle'
    };
    function getArea(shape, options) {
      let area = 0;
      switch (shape) {
        case shapeType.triangle: // 把原先的改为变量了
          area = .5 * options.width * options.height;
          break;
      }
      return area;
    }
    getArea(shapeType.triangle, { width: 100, height: 100 });// 也改为变量了

    /// symbol强大之处来了，我们不有改变函数内的任何东西，只需：
    const shapeType = {
      triangle: Symbol() //这下不管等于什么，他都是唯一的，不存在与其他属性名冲突的现象了
    };
</script>
</body>
</html>